<template>
	<view class="study-page">
		<!-- <view class="zhan1"></view> -->
		<view class="zhan1" style="background:#ffffff"></view>
		<view class="search-top">
			<view class="select-box">
				<view class="item" v-for="(item,index) in list" :class="item.addClass" @tap="select(index)">{{item.name}}</view>
			</view>
			<!-- <span class="text" @tap="back">取消</span> -->
		</view>
		<view class="main-content" v-show="active==0 || active==2">
			<view class="top">
				<span class="text" v-show="active==0">我的学习</span>
				<span class="text" v-show="active==1">我的考试</span>
				<span class="text" v-show="active==2 ">已完成学习</span>
				<!-- <span class="more">全部 <i class="iconfont icondown2"></i> </span> -->
			</view>
			<view class="item" v-for="(item,index) in courseList" @tap="goPage('../course/content?id='+item.privateId)">
				<image :src="item.photo" class="img"></image>
				<view class="courseTypeLabel">{{item.courseTypeLabel}}</view>
				<view class="right">
					<span class="title">{{item.courseName}}</span>
					<p class="number">{{item.introduction}}</p>
					<cmd-progress :percent="item.jindu" stroke-color="#1783dd" class="main-jindu"></cmd-progress>
					<!-- <cmd-progress :percent="item.jindu" stroke-color="#1783dd" class="main-jindu" v-show="item.courseType=='1' || item.courseType=='10'"></cmd-progress> -->
					<span class="main-price" v-show="item.courseType=='4'">{{item.address}}</span>
					<!-- <span class="iconfont ">已更新{{item.classHours}}课时</span> -->
				</view>
			</view>
			<nodata v-show="courseList.length==0&&start"></nodata>
		</view>
		
		
			<scroll-view scroll-y @scrolltolower="loadMore" class="main-box" v-show="active==1">
				<!-- <h3 class="top-title">所有培训计划</h3> -->
				<view class="top">					
					<span class="text" v-show="active==1">我的考试</span>
					<!-- <span class="more">全部 <i class="iconfont icondown2"></i> </span> -->
				</view>
				<view class="all-train">
					<view class="exam-item" v-for="(item,index) in paperList"
						@click="item.educationKaoshi.kaoshiStu=='1' && item.educationKaoshi.educationUserKaoshi.jiaojuanFlag=='0'  && gokaoshi(item)">
						<view class="name" :title="item.name">{{item.educationKaoshi.name}}</view>
								
						<!-- <span class="line"></span> -->
								
						<view class="item">
							<view class="exam-info">
								<view class="exam-left">
									<view class="exam-time">考试开始时间:&nbsp;&nbsp;{{item.educationKaoshi.startTime}}</view>
									<view class="stop-time">考试结束时间:&nbsp;&nbsp;{{item.educationKaoshi.endTime}}</view>
									<view class="num-status">
										<view class="person-num">
											参与人数: {{item.educationKaoshi.userKaoshiCount}} 人
										</view>
										<span class="status" v-show="item.educationKaoshi.kaoshiStu=='1'">正在考试</span>
										<span class="status" v-show="item.educationKaoshi.kaoshiStu=='2'">考试结束</span>
										<span class="status" v-show="item.educationKaoshi.kaoshiStu=='3'">考试未开始</span>
									</view>
									
								</view>
								
								
								
								
								<view class="baoming_list">
								
									<!-- <view class="staandname"> -->
									
									<!-- </view> -->
								
									<!-- <view class="is-sign-up0" v-show="item.baoming=='1'">
										<span class="signup">报名未开始</span>
									</view>
								
									<view class="is-sign-up0" v-show="item.baoming=='3'&&item.joinFlag =='0'">
										<span class="signup">报名结束</span>
									</view> -->
								
								
									<view class="is-sign-up1"
										v-show="item.educationKaoshi.educationUserKaoshi.jiaojuanFlag=='0' "
										@click="gokaoshi(item)">
										开始考试
									</view>
								
								
									<view class="is-sign-up2" v-show="item.educationKaoshi.educationUserKaoshi.jiaojuanFlag=='1'"
										@click="chaChengji()">
										查看成绩
									</view>
								
								</view>
								
								
							</view>
								
								
								
								
						</view>
								
						<view style="clear:both"></view>
					</view>
				</view>
				<nodata v-show="paperList.length==0&&start"></nodata>
				<view class="end-text" v-show="start && end &&paperList.length!=0">已经到底啦...</view>
				<button class="end-text uni-icons " v-show="load" loading="true">数据加载中...</button>
			</scroll-view>
	</view>
</template>

<script>
	import Cookies from 'js-cookie'
	import nodata from '@/components/nodata.vue'
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	export default {
		components: {nodata,cmdProgress},
		data() {
			return {
				end: false,
				load: false,
				start: false,
				loadingTxt: '加载更多',
				total: null,
				paperList: [],
				show: true,
				current: 0,
				current1: 0,
				typeLIst2: [],
				type: '',
				pageSize1:10,
				pageNo1:1,

				input: '',
				placeholder:'\ue60c 输入内容',
				list:[
					{name:'我的学习',addClass:'active',clearStudy:false},
					{name:'我的考试',addClass:''},
					{name:'已完成学习',addClass:'',clearStudy:true},
				],
				clearStudy:false,
				start:false,
				listData:[],
				courseList:[
				
				],
				pageSize:50,
				pageNo:1,
				active:0,
			}
		},
		onLoad() {
			if(!uni.getStorageSync("token")){
				// uni.reLaunch({
				// 	url:"../login/login"
				// })
				uni.navigateTo({
					url:"../login/login"
				})
				return;
			}	
		},
		onShow() {
			this.getData();
		},
		methods: {
			gokaoshi(){
				uni.showModal({
					title: '提示',
					content: '请登录电脑端参加考试！',
					showCancel:false,
					success: function(res) {
						if (res.confirm) {
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			chaChengji(){
				uni.showModal({
					title: '提示',
					content: '请到电脑端查看成绩！',
					showCancel:false,
					success: function(res) {
						if (res.confirm) {
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});			
			},
			loadMore() {
				if (!this.load && !this.end) {
					this.load = true;
					this.pageNo1 = this.pageNo1 + 1;
					setTimeout(() => {
						// this.getbaomingFlag(this.current);
						this.getExamList();
					}, 1000)
				}
			},
			goPage(url){
				uni.navigateTo({
				    url: url
				});
			},
			back(){
				uni.navigateBack({
				    delta: 2
				});
			},
			getData(){
			  // this.courseList = []
	          let that = this;
	          this.$http.get("/f/studyCenter?pageNo="+this.pageNo+"&pageSize="+this.pageSize+"&clearStudy="+this.clearStudy)
	          .then(function (response) {
	                let list = response.data;
					console.log(list,8888888888)
	                that.total = response.count;
	                if(list.length!=0){
	                    list.forEach((item,i)=>{
	                        item = Object.assign(item,item.educationCourse,item.educationCourse.educationCourse)
	                        item.photo = that.$url + item.photo;
	                        // if(item.courseType=='10'){
	                        // 	item.detailsLength = item.educationCourseThirdDetailsList.length;
	                        // }
	                        // else{
	                        // 	item.detailsLength = item.educationCourseDbDetailsList.length;
	                        // }
	                        if(item.detailsLength!=0){
	                            item.jindu =  Math.ceil((item.userStudyCount/item.detailsLength)*100)
	                        }
	                        else{
	                            item.jindu  = 0;
	                        }
	                        
	                    })
	                }
	                that.courseList = list;
					uni.hideLoading();
	                that.start = true;
	          })
	          .catch(function (error) {
	              // handle error
	              console.log(error);
	          })
	        },
			getExamList() {
				let that = this;
				this.loading = true;
				this.$http.post("/f/pageUserKaoshi?pageNo=" + this.pageNo1 + "&pageSize=" + this.pageSize1)
					.then(function(response) {
						console.log(response, 9090)
						that.start = true;
						let list = response.data;
						that.total = response.count;
						console.log(list)
						if (list.length != 0) {
							let starttime;
							let endtime;
							let nowtime = new Date().getTime();
							let start, end;
							list.forEach((item, i) => {
								console.log(item.educationKaoshi.startTime)
								console.log(item.educationKaoshi.endTime)
								start = item.educationKaoshi.startTime;
								start = start.replace(/-/g, '/'); // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
								starttime = new Date(start).getTime()
			
								end = item.educationKaoshi.endTime;
								end = end.replace(/-/g, '/');
								endtime = new Date(end).getTime()
			
								if (starttime < nowtime && nowtime < endtime) {
									//正在考试
									item.educationKaoshi.kaoshiStu = '1'
								}
								if (endtime < nowtime) {
									//考试结束
									item.educationKaoshi.kaoshiStu = '2'
								}
								if (starttime > nowtime) {
									//考试未开始
									item.educationKaoshi.kaoshiStu = '3'
								}
							})
						}
						console.log('hha ')
						console.log(list)
						
						if (that.pageNo1 > 1) {
							that.paperList = that.paperList.concat(list);
						} else {
							that.paperList = list;
						}
						if (that.paperList.length == response.count) {
							that.end = true;
						}
						// that.paperList = list;
						that.loading = false;
					})
					.catch(function(error) {
						// handle error
						console.log(error);
					})
			},
			search(){

			},
			change(item){
				this.current = item.detail.current;
			},
			goSelect(){
				console.log(222)
			},
			select(index){
				this.active = index;
				this.list.forEach((item,i)=>{
					if(i==index){
						if(index == 1){
							item.addClass = "active";
							this.getExamList();
						}else{
							item.addClass = "active";
							this.clearStudy = item.clearStudy;
							uni.showLoading({
								title:"数据加载中"
							})
							this.getData();
						}
					}
					else{
						item.addClass = ""
					}
				})
				
			}
		}
	}
</script>

<style lang="less">
	.study-page{
		width:100%;
		height:100%;
		background:#f5f5f5;
		// overflow-y:auto;
		.main-box {
			width: 100%;
			height: calc(100% - 120rpx);
			background:white;
			padding-top: 8px;
			// position: absolute;
			// bottom: 100rpx;
			// overflow-y: scroll;
			.top{
				display:flex;
				width:100%;
				height:60rpx;
				align-items:center;
				justify-content:space-between;
				padding-left: 12px;
				.text{
					font-size:34rpx;
					color:#555555;
				}
				.more{
					font-size:28rpx;
					line-height:60rpx;
					display:flex;
					align-items:center;
					color:#555555;
					.iconfont{
						margin-left:6rpx;
						line-height:62rpx;
						font-size:30rpx;
						margin-left:10rpx;
					}
				}
			}
		
			.all-train {
			width: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			// margin-bottom: 60rpx;
		
			.exam-item {
				background-color: white;
				margin-top: 20rpx;
				margin-bottom: 10rpx;
				width: 90%;
				border-radius:8rpx;
				box-shadow: 2px 2px 10px #409eff;
				padding: auto 0;
				background: url('../../static/img/new-exam.png') 100% 100% no-repeat;
					
				.name {
					// display: inline-block;
					border-top-left-radius: 8rpx;
					border-top-right-radius: 8rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					background: #0076CA;
					// text-indent:1em;
					color: white;
					font-size: 15px;
					text-align: center;
					font-family: PingFangSC-regular;
				}
			
				
					.line {
						border: 1px solid #0076CA;
						width: 100%;
						margin: 5px 0 5px 0;
					}
				
					.item {
						// display: flex;
						// justify-content: space-between;
						// width: 100%;
						// height: 100rpx;
						padding:20rpx 10rpx;
						// padding-right: 70rpx;
						.exam-info {
							display: flex;
							// flex-direction: column;
							width: 100%;
							justify-content: space-between;
							align-items: center;
							.exam-left{
								.stop-time {
									// width: 214rpx;
									// height: 20rpx;
									color: #9D9B9B;
									font-size: 14px;
									text-align: left;
									font-family: PingFangSC-regular;
									margin-top: 6rpx;
								}
												
								.exam-time {
									// width: 186rpx;
									// height: 20rpx;
									color: #9D9B9B;
									font-size: 14px;
									text-align: left;
									font-family: PingFangSC-regular;
									margin-top: 6rpx;
								}
								.num-status{
									display:flex;
									align-items: center;
									justify-content: space-between;
									.person-num {
										// margin-top: 50rpx;
										// width: 100%;
										// height: 20rpx;
										color: #9D9B9B;
										font-size: 14px;
										text-align: left;
										font-family: PingFangSC-regular;
										margin-top: 6rpx;
									}
									.status {
										background-color: #d01515;
										// float: left;
										width: 130rpx;
										color: #ffffff;
										font-size: 14px;
										text-align: center;
										font-family: PingFangSC-regular;
										// line-height: 80rpx;
									}
								}
								
							}
							.baoming_list {
								// width: 100%;
								height: 80rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
												
								.is-sign-up0 {
									cursor: pointer;
									width: 180rpx;
									height: 50rpx;
									line-height: 50rpx;
									background-color: rgba(157, 155, 155, 100);
									text-align: center;
									border: 1rpx solid rgba(187, 187, 187, 100);
									border-radius: 8rpx;
									color: white;
									font-size: 14px;
									.signup {
										line-height: 30rpx;
										width: 56rpx;
										height: 20rpx;
										color: rgba(253, 253, 255, 100);
										font-size: 14px;
										text-align: left;
										font-family: PingFangSC-regular;
									}
								}
											
								.is-sign-up1 {
									cursor: pointer;
									width: 180rpx;
									height: 50rpx;
									line-height: 50rpx;
									background-color: #0076CA;
									text-align: center;
									border: 1rpx solid rgba(187, 187, 187, 100);
									border-radius: 8rpx;
									color: white;
									font-size: 14px;
									.signup {
										line-height: 30rpx;
										width: 56rpx;
										height: 20rpx;
										color: white;
										font-size: 14px;
										text-align: left;
										font-family: PingFangSC-regular;
									}
								}
											
								.is-sign-up2 {
									width: 180rpx;
									height: 50rpx;
									line-height: 50rpx;
									background-color: rgba(238, 92, 92, 100);
									text-align: center;
									border: 1rpx solid rgba(187, 187, 187, 100);
									border-radius: 8rpx;
									color: white;
									font-size: 14px;
									.chenggong {
										line-height: 30rpx;
										width: 56rpx;
										height: 20rpx;
										color: rgba(253, 253, 255, 100);
										font-size: 14px;
										text-align: left;
										font-family: PingFangSC-regular;
									}
								}
											
							}
				
							
				
						}
								
				
					}
				
				}
		
			}
		}
		.main-content{
			width:100%;
			box-sizing:border-box;
			padding:20rpx 30rpx;
			padding-bottom:30rpx;
			background:#ffffff;
			// height:calc(100% - 150rpx);
			height: 100%;
			overflow:hidden;
			overflow-y:auto;
			
			.ind-content{
				width:100%;
				display:block;
				margin:30rpx auto;
				position:relative;
				.text{
					position:absolute;
					width:100%;
					line-height:40rpx;
					top:40rpx;
					font-size:36rpx;
					color:#fff;
					text-align:center;
					left:0;
					z-index:999;
				}
				.main-data{
					box-sizing:border-box;
					padding:0 60rpx;
					line-height:40rpx;
					font-size:30rpx;
					color:#fff;
					position:absolute;
					left:0;
					top:100rpx;
					z-index:999;
				}
			}
			.banner{
				width:100%;
				display:block;
			}
			.news-main{
				width:100%;
				.news-content{
					width:100%;
					box-sizing:border-box;
					padding-left:0rpx;
					.news-item{
						width:100%;
						border-bottom: 1px #d0d0d0 dashed;
						padding-bottom:20rpx;
						padding-top:20rpx;
						.name{
							width:95%;
							display:block;
							line-height:40rpx;
							font-size:30rpx;
							color:#555555;
							
						}
						.time{
							width:100%;
							display:block;
							line-height:40rpx;
							font-size:28rpx;
							color:#999999;
							overflow:hidden;
							margin-top:10rpx;
							text-overflow:ellipsis;
							white-space:nowrap;
						}
						.time:before{
							color:#1783dd;
							font-size:40rpx;
							margin-right:10rpx;
							position:relative;
							top:4rpx;
						}
						.iconzuozhe:before{
							font-size:36rpx;
						}
					}
					.news-item:last-child{
						border:0;
					}
				}
				.news-top{
					width:100%;
					height:70rpx;
					background:#fbdcdc;
					box-sizing:border-box;
					padding:0 40rpx;
					line-height:70rpx;
					font-size:30rpx;
					color:#d01515;
				}
				.news-top:before{
					margin-right:16rpx;
					font-size:34rpx;
				}
			}
			.item{
				width:100%;
				display:flex;
				margin-top:30rpx;
				position: relative;
				.courseTypeLabel{
					width: 260rpx;
					position: absolute;
					top: 0;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					text-align: center;
					// background: #0076CA;
					background:rgba(0,118,202,0.5) ;
					color: #FFFFFF;
					// opacity:0.5;
				}
				.img{
					width:260rpx;
					height:180rpx;
					margin-right:30rpx;
					border-radius:10rpx;
				}
				.right{
					width:calc(100% - 290rpx);
					position:relative;
					.go{
						position:absolute;
						width:160rpx;
						height:60rpx;
						line-height:60rpx;
						text-align:center;
						border-radius:6rpx;
						font-size:28rpx;
						color:#fff;
						background:#1783dd;
						right:20rpx;
						bottom:20rpx;
					}
					.title{
						width:100%;
						display:block;
						line-height:40rpx;
						height:40rpx;
						overflow: hidden;    
					    text-overflow:ellipsis;    
					    white-space: nowrap;
					    font-size:32rpx;
					    color:#444444;
					    font-weight:600;
					    margin-top:10rpx;
					}
					.main-jindu{
						width:100%;
						box-sizing:border-box;
						margin-top:10rpx;
					}
					.main-price{
						margin-top:10rpx;
						display:block;
						box-sizing:border-box;
						font-size:28rpx;
						color:#666666;
					}
					.number{
						width:100%;
						display:block;
						line-height:40rpx;
						height:80rpx;
						display: -webkit-box;    
					    -webkit-box-orient: vertical;    
					    -webkit-line-clamp: 2;    
					    overflow: hidden;
					    font-size:28rpx;
					    color:#666666;
					    margin-top:5rpx;
					}
					.iconfont{
						width:100%;
						display:block;
						line-height:30rpx;
						height:30rpx;
						overflow: hidden;    
					    text-overflow:ellipsis;    
					    white-space: nowrap;
					    font-size:26rpx;
					    color:#1783dd;
					    margin-top:10rpx;
					}
					
				}
			}
			.top{
				display:flex;
				width:100%;
				height:60rpx;
				align-items:center;
				justify-content:space-between;
				.text{
					font-size:34rpx;
					color:#555555;
				}
				.more{
					font-size:28rpx;
					line-height:60rpx;
					display:flex;
					align-items:center;
					color:#555555;
					.iconfont{
						margin-left:6rpx;
						line-height:62rpx;
						font-size:30rpx;
						margin-left:10rpx;
					}
				}
			}
		}
		.search-top{
			width:100%;
			padding:0 30rpx;
			height:100rpx;
			display:flex;
			justify-content:center;
			align-items:center;
			box-sizing:border-box;
			border-bottom:1px solid #e6e6e6;
			background:#ffffff;
			.select-box{
				border-radius:30rpx;
				height:60rpx;
				border:#1783dd 1px solid;
				overflow:hidden;
				display:flex;
				.item{
					width:200rpx;
					color:#1783dd;
					font-size:30rpx;
					height:60rpx;
					line-height:60rpx;
					text-align:center;
				}
				.active{
					background:#1783dd;
					color:#fff;
				}
			}
		}
	}
</style>
